import React from 'react'
import './TodoHeader.css';
//导入 dispach 的函数
import {useDispatch} from 'react-redux'
import { asyncAddTodo } from '../../../app/slices/todoSlice';

export default function TodoHeader() {
  //获取 dispatch 函数
  let dispatch = useDispatch();

  return (
    <div className="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={(e) => {
        //判断
        if(e.code === 'Enter'){
          //输出文本框的值
          // console.log(e.target.value);
          dispatch(asyncAddTodo(e.target.value))
        }
      }} />
    </div>
  )
}
